@import './color'
@import './icon'
@import './var'
@import './mixin'

html, body
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  letter-spacing: 1px
  font-family: "Source Sans Pro", Arial, sans-serif
  overflow: hidden
  >div 
    width: inherit
    height: inherit
  
  #app
    width: 100%
    height: 100%

a
  text-decoration: none
  color: $black

p, h1, h2, h3, h4, h5, h6
  margin: 0

input
  min-height: 32px
  color: rgba(0, 0, 0, .54)
  border-color: rgba(0, 0, 0, .12)
  border-width: 1px
  border-radius: 2px
  padding: 0 5px

  &:focus, &:active
    border-color: rgba(0, 0, 0, .22)
    outline: 0
    box-shadow: none

#main
  width: 100%
  height: 100%
  
  .container
    width: 100%
    height: 100%
    text-align: justify
    +y-scroll
    transition: all .5s cubic-bezier(.55, 0, .1, 1)

    >* 
      width: 100%

.page-enter-active, .page-leave-active
  transition: opacity .1s

.page-enter, .page-leave-active
  opacity: 0

.slide-left-enter, .slide-right-leave-active
  opacity: 0
  transform: translateX(100%)
  -webkit-transform: translateX(100%)

.slide-left-leave-active, .slide-right-enter
  opacity: 0
  transform: translateX(0)
  -webkit-transform: translateX(0)

.swiper-pagination-bullet 
  background-color: $white !important
  border: 1px solid $grey
  opacity: .7 !important
.swiper-pagination-bullet-active
  background-color: $grey-400 !important

.table 
  background-color: $white
  border: 0
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18)
  margin-top: 16px
  margin-bottom: 16px
  width: 100%

      
  tbody 
    &:first-child > tr:first-child 
      td,th 
        border-top: 0
      
    
    tr:hover 
      background-color: $white
    
  td,th 
    border-top: 1px solid $grey-300
    font-size: 20px
    line-height: 30px
    padding: 6px 32px 6px 24px
    vertical-align: top

    &.nowrap 
      white-space: nowrap
      width: 1%
    
  thead 
    &:first-child > tr:first-child 
      td, th 
        border-top: 0
    
    td, th 
      color: $grey-400
      font-size: 14px
      vertical-align: bottom
    
  

